import dash
from dash import html, dcc
import feffery_antd_components as fac
from dash.dependencies import Input, Output, State, ALL, MATCH

app = dash.Dash(
    __name__,
    suppress_callback_exceptions=True,
    update_title=None
)

app.layout = html.Div(
    [
        # 注入持久化存储器
        dcc.Store(id='persistence-store', storage_type='session'),

        fac.AntdRow(
            [
                fac.AntdCol(
                    fac.AntdMenu(
                        id='menu',
                        menuItems=[
                            {
                                'component': 'Item',
                                'props': {
                                    'key': 'page1',
                                    'title': '页面1',
                                    'icon': 'antd-home'
                                }
                            },
                            {
                                'component': 'Item',
                                'props': {
                                    'key': 'page2',
                                    'title': '页面2',
                                    'icon': 'antd-schedule'
                                }
                            }
                        ],
                        defaultSelectedKey='page1',
                        style={
                            'width': '200px',
                            'height': '100%'
                        }
                    ),
                    flex='none'
                ),

                fac.AntdCol(
                    id='page-content',
                    flex='auto'
                )
            ],
            style={
                'height': '100%'
            }
        )
    ],
    style={
        'height': '100vh'
    }
)


@app.callback(
    Output('page-content', 'children'),
    Input('menu', 'currentKey'),
    State('persistence-store', 'data')
)
def render_page_content(currentKey, data):
    if currentKey:

        if currentKey == 'page1':
            # 若已有store缓存数据
            if data:
                data[-1]['props']['children']['props']['children']['props']['nClicks'] = None
                return fac.AntdRow(
                    data,
                    id='area-container'
                )

            # 否则初始化page1页面内容
            return fac.AntdRow(
                [
                    fac.AntdCol(
                        [
                            html.Div(
                                f'区块{i}',
                                id={
                                    'type': 'area-demo',
                                    'index': i
                                },
                                style={
                                    'backgroundColor': 'rgba(64, 173, 255, 1)',
                                    'color': 'white',
                                    'height': '100px',
                                    'display': 'flex',
                                    'justifyContent': 'center',
                                    'alignItems': 'center',
                                    'border': '1px solid white'
                                }
                            ),
                            dcc.Interval(
                                id={
                                    'type': 'area-interval',
                                    'index': i
                                },
                                interval=1000
                            )
                        ],
                        span=6
                    )
                    for i in range(6)
                ] + [
                    fac.AntdCol(
                        html.Div(
                            fac.AntdButton(
                                fac.AntdIcon(
                                    icon='antd-plus-circle'
                                ),
                                shape='circle',
                                type='text',
                                nClicks=None,
                                id={
                                    'type': 'area-demo',
                                    'index': 'add-button'
                                }
                            ),
                            style={
                                'color': 'white',
                                'height': '100px',
                                'display': 'flex',
                                'justifyContent': 'center',
                                'alignItems': 'center',
                                'border': '1px dashed rgb(220, 220, 220)'
                            }
                        ),
                        span=6
                    )
                ],
                id='area-container'
            )

        elif currentKey == 'page2':
            return '页面2'


@app.callback(
    Output('area-container', 'children'),
    [Input('area-container', 'children'),
     Input('persistence-store', 'data')]
)
def store_to_layout(children, data):
    if data:
        data[-1]['props']['children']['props']['children']['props']['nClicks'] = None
        return data

    return dash.no_update


@app.callback(
    Output('persistence-store', 'data'),
    Input({'type': 'area-demo', 'index': 'add-button'}, 'nClicks'),
    State('area-container', 'children')
)
def add_area(nClicks, children):
    if nClicks:
        return [
            *children[:-1],
            fac.AntdCol(
                [
                    html.Div(
                        f'区块{children.__len__() - 1}',
                        id={
                            'type': 'area-demo',
                            'index': children.__len__() - 1
                        },
                        style={
                            'backgroundColor': 'rgba(64, 173, 255, 1)',
                            'color': 'white',
                            'height': '100px',
                            'display': 'flex',
                            'justifyContent': 'center',
                            'alignItems': 'center',
                            'border': '1px solid white'
                        }
                    ),
                    dcc.Interval(
                        id={
                            'type': 'area-interval',
                            'index': children.__len__() - 1
                        },
                        interval=1000
                    )
                ],
                span=6
            ),
            children[-1]
        ]

    return dash.no_update


@app.callback(
    Output({'type': 'area-demo', 'index': MATCH}, 'children'),
    Input({'type': 'area-interval', 'index': MATCH}, 'n_intervals'),
    State({'type': 'area-demo', 'index': MATCH}, 'children'),
)
def interval_to_area(n_intervals, children):
    return children.split(' - ')[0] + ' - ' + str(n_intervals)


if __name__ == '__main__':
    app.run_server(debug=True)
